<template>
  <div>
    <el-menu class="el-menu-vertical-demo">
      <el-menu-item index="1">
        <el-button type="success" @click="handleCreate">新建检查任务</el-button>
      </el-menu-item>
    </el-menu>
  </div>
  <div>
    <el-card style="margin:20px;width: 97%;height: 80px;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="项目名称:">
          <el-input v-model="searchForm.projectName" placeholder="项目名称"/>
        </el-form-item>
        <el-form-item label="检查人:" style="width: 150px">
          <el-input v-model="searchForm.inspector" placeholder="检查人"/>
        </el-form-item>
        <el-form-item label="检查时限:">
          <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="times"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCheck">查询检查单</el-button>
          <el-button type="primary" @click="reset">重置查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:20px;width: 97%;">
      <el-table :data="checkArr" stripe>
        <el-table-column prop="projectName" label="项目名称" width="100px" align="center"/>
        <el-table-column prop="inspectionLocation" width="100px" label="检查部位" align="center"/>
        <el-table-column prop="area" label="区域" align="center"/>
        <el-table-column prop="inspector" label="检查人" width="70" align="center"/>
        <el-table-column prop="applicant" label="责任人" width="70" align="center"/>
        <el-table-column prop="description" label="描述" width="120px" align="center"/>
        <el-table-column prop="inspectionFrequency" label="检查频率" align="center"/>
        <el-table-column prop="status" label="状态" align="center"/>
        <el-table-column prop="inspectionTimeLimit" label="检查时限" width="100px" align="center"/>
        <el-table-column prop="effectiveDate" label="生效日期" width="100px" align="center"/>
        <el-table-column prop="reInspector" label="复查人" align="center"/>
        <el-table-column prop="inspectionStatus" label="检查状态" align="center"/>
        <el-table-column prop="statusDetails" label="状态详情" width="120px" align="center"/>
        <el-table-column label="操作" align="center" width="100px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="beforeUpdate(scope.row.id)">编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteCheck(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin:30px;float: right;">
        <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
         :pager-count="4" 表示显示4个页码
         :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
         current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
         :total="400" 表示总条数，需要双向绑定
         @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
         @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20]"
            v-model:current-page="currentPage"
            v-model:page-size="currentSize"
            v-model:total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :before-close="handleClose"
               width="50%"
    >
      <el-form style="padding: 30px;" label-position="top">
        <el-form-item label="项目名称:">
          <el-input v-model="saveForm.projectName" placeholder="项目名称"/>
        </el-form-item>
        <el-form-item label="检查部位:">
          <el-input v-model="saveForm.inspectionLocation" placeholder="项目名称"/>
        </el-form-item>
        <el-form-item label="区域:">
          <el-input v-model="saveForm.area" placeholder="区域"/>
        </el-form-item>
        <el-form-item label="检查人:">
          <el-input v-model="saveForm.inspector" placeholder="检查人"/>
        </el-form-item>
        <el-form-item label="责任人:">
          <el-input v-model="saveForm.applicant" placeholder="责任人"/>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="saveForm.description" placeholder="描述"/>
        </el-form-item>
        <el-form-item label="检查频率:">
          <el-select placeholder="请选择检查频率" v-model="saveForm.inspectionFrequency"
          >
            <el-option label="每天" value="每天"/>
            <el-option label="每周" value="每周"/>
            <el-option label="每月" value="每月"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select placeholder="请选择状态" v-model="saveForm.status"
          >
            <el-option label="正常" value="正常"/>
            <el-option label="待整改" value="待整改"/>
            <el-option label="超期" value="超期"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检查时限:">
          <el-date-picker
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              v-model="saveForm.inspectionTimeLimit"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="生效日期:">
          <el-date-picker
              type="date"
              placeholder="生效日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              v-model="saveForm.effectiveDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="复查人:">
          <el-input v-model="saveForm.reInspector" placeholder="复查人"/>
        </el-form-item>
        <el-form-item label="检查状态:">
          <el-select placeholder="请选择检查状态" v-model="saveForm.inspectionStatus"
          >
            <el-option label="合格" value="103"/>
            <el-option label="不合格" value="104"/>
            <el-option label="超期未检查" value=""/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态详情:">
          <el-input v-model="saveForm.statusDetails" placeholder="状态详情"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-footer style="text-align: right">
          <el-button type="primary" @click="saveCheck">保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-footer>
      </template>
    </el-dialog>
  </div>


</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogVisible = ref(false);
//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  getCheck();
}
const saveForm = ref({
  projectName: '',
  inspectionLocation: '',
  area: '',
  inspector: '',
  applicant: '',
  description: '',
  inspectionFrequency: '',
  status: '',
  inspectionTimeLimit: '',
  effectiveDate: '',
  reInspector: '',
  inspectionStatus: '',
  statusDetails: ''


})
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  getCheck()
}


const times = ref([]);
const inspectorArr = ref[{
  name: '张三',
  inspector: 101
}, {
  name: '李四',
  inspector: 102
}, {
  name: '王五',
  inspector: 103
}]
const searchForm = ref({
  projectName: '',
  inspector: ''
});
const checkArr = ref([]);
onMounted(() => {
  getCheck();
})
const getCheck = () => {
  searchForm.value.startTime = times.value[0];
  searchForm.value.endTime = times.value[1];
  searchForm.value.pageSize = currentSize.value;
  searchForm.value.pageNum = currentPage.value;

  let data = qs.stringify(searchForm.value);
  console.log(data);
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/check/select?' + data).then((res) => {
    if (res.data.code === 2000) {
      checkArr.value = res.data.data.list;
      total.value = res.data.data.total;
    } else {
      ElMessage.error(res.data.message);
    }
  })
}

/*
* 打开新建窗口
 */
const handleCreate = () => {
  dialogVisible.value = true;
}
const handleClose = () => {
  if (confirm('确定关闭窗口吗？')) {
    dialogVisible.value = false;
  }
}
/*
* 新建
 */
const saveCheck = () => {
  if (!saveForm.value.projectName || !saveForm.value.inspectionLocation || !saveForm.value.area || !saveForm.value.inspector || !saveForm.value.applicant || !saveForm.value.description || !saveForm.value.inspectionFrequency || !saveForm.value.status || !saveForm.value.inspectionTimeLimit || !saveForm.value.effectiveDate || !saveForm.value.reInspector || !saveForm.value.inspectionStatus || !saveForm.value.statusDetails) {
    ElMessage.error('请完善信息！');
    return;
  }
  let data = qs.stringify(saveForm.value);
  axios.post(BASE_URL + '/quality_api' + '/v1/quality/check/save', data).then((res) => {
    if (res.data.code === 2000) {
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      saveForm.value = {};
      getCheck();
    } else {
      ElMessage.error(res.data.message);
    }
  });
}

/*
* 编辑
 */

const dialogTitle = ref('新建检查任务');
const beforeUpdate = (id) => {
  dialogTitle.value = '编辑检查任务';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/check/select?id=' + id).then((res) => {
    if (res.data.code == 2000) {
      saveForm.value = res.data.data.list[0];
    } else {
      ElMessage.error(res.data.message);
    }
  })
}
/*
* 删除
 */
const deleteCheck = (id) => {
  if (confirm('确定要删除吗？')){
    axios.post(BASE_URL + '/quality_api' + '/v1/quality/check/delete/' + id).then((res) => {
      if (res.data.code == 2000) {
        ElMessage.success('删除成功');
        getCheck();
      } else {
        ElMessage.error(res.data.message);
      }
    })
  }
}

/*
重置搜索
 */
const reset = () => {
  searchForm.value = {
    projectName: '',
    inspector: ''
  }
  times.value = [];
  getCheck();
}


</script>


<style scoped>

</style>